// //订单列表表格
import { Table } from 'antd';
import React,{useState,useEffect} from "react";
// import './PurchasingManagement.css'

const TableTage = (props) => {
const [data,setData] = useState([[...props.data]])
    // const columns = [
    //     {
    //         title: '编号',
    //         dataIndex: 'bianhao',
    //         render: (text, record) => (
    //             <a href='#!'>
    //                 {record.age} 11{text}

    //             </a>
    //         ),
    //     },
    //     {
    //         title: '创建日期',
    //         dataIndex: 'chaungjianriqi',
    //     },
    //     {
    //         title: '供货商',
    //         dataIndex: 'gonghuoshang',
    //     },
    //     {
    //         title: '总金额',
    //         dataIndex: 'zongjine',
    //     },
    //     {
    //         title: '需用日期',
    //         dataIndex: 'xuyongriqi',
    //     },
    //     {
    //         title: '创建人',
    //         dataIndex: 'chuangjianren',
    //     },
    //     {
    //         title: '审批',
    //         dataIndex: 'shenpi',
    //     },
    //     {
    //         title: '状态',
    //         dataIndex: 'zhuangtai',
    //     },
    //     {
    //         title: '审批操作',
    //         dataIndex: 'shenpicaozuo',
    //         render: (text, record) => <a href='#!'>{record.shenpicaozuo}</a>
    //     },
    //     {
    //         title: '操作',
    //         dataIndex: 'caozuo', //这是对应Data的字段
    //         render: (text, record) => {
    //             //判断渲染啥
    //             if (record.shenpicaozuo === '入库' || '') {
    //                 return <span >
    //                     <a href='#!'> 编辑 </a>
    //                     <a href='#!'> 预览 </a>
    //                     <a href='#!'> 删除 </a>
    //                 </span>

    //             } else {
    //                 return <div><a className='Atag' href='#!'>  删除  </a> <a href='#!'>预览  </a></div>
    //             }

    //         },
    //         // render: (text, record) => (
    //         //     <span>
    //         //       <a>Invite </a>
    //         //       <Divider type="vertical" />
    //         //       <a>Delete</a>
    //         //     </span>
    //         //   ),
    //         
    //     },
    // ];
    // const data =[
    //     {
    //         key: 1, //用于循环的key
    //         bianhao: 1,
    //         chaungjianriqi: 'chaungjianriqi1',
    //         gonghuoshang: 32,
    //         zongjine: 'zongjine1',
    //         xuyongriqi: '日期',
    //         chuangjianren: 'chuangjianre1n',
    //         shenpi: 'shenp1i',
    //         zhuangtai: '通过',
    //         shenpicaozuo: '待审批',
    //         caozuo: 'ca1ozuo ',
    //     }

    // ];
    const columns = [
        {
            title: '编号',
            dataIndex: 'purchaseOrderId',
            render: (text, record) => (
                <a href='#!'>
                    {record.purchaseOrderId}

                </a>
            ),
        },
        {
            title: '创建日期',
            dataIndex: 'purchaseUseDate',
        },
        {
            title: '供货商',
            dataIndex: 'paymentType',
        },
        {
            title: '总金额',
            dataIndex: 'orderTotalAmount',
        },
        {
            title: '需用日期',
            dataIndex: 'purchaseUseDate',
        },
        {
            title: '创建人',
            dataIndex: 'purchaseOrderCreator',
        },
        {
            title: '审批',
            dataIndex: 'purchaseOrderApprover',
        },
        {
            title: '状态',
            dataIndex: 'purchaseOrderStatus',
        },
        {
            title: '审批操作',
            dataIndex: 'shenpicaozuo',
            render: (text, record) => <a href='#!'>{record.shenpicaozuo}</a>
        },
        {
            title: '操作',
            dataIndex: 'caozuo', //这是对应Data的字段
            render: (text, record) => {
                //判断渲染啥
                if (record.shenpicaozuo === '入库' || '') {
                    return <span >
                        <a href='#!'> 编辑 </a>
                        <a href='#!'> 预览 </a>
                        <a href='#!'> 删除 </a>
                    </span>

                } else {
                    return <div><a className='Atag' href='#!'>  删除  </a> <a href='#!'>预览  </a></div>
                }

            },
            
        },
    ];

    // const data = props.data //不能直接props.data 需要setData修改才生效
    const tab =() =>{
        setData(props.data)
        console.log('props', props)
    }
    // useEffect(()=>{
    //     setData(props.data)
    // })
    return (
        <>
            {/* {props.data} */}
            <Table bordered columns={columns} dataSource={data} />
            <button onClick={tab}>表格的按钮</button>
        </>
    )
}
export default TableTage;